<template>
  <div>
    <div class="content" style="width: 100%;">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="设备名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="ip"
          label="ip地址">
        </el-table-column>
        <el-table-column
          prop="date"
          label="设备状态">
        </el-table-column>
        <el-table-column
          prop="option"
          label="设备连接"
          width="300">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              @change="change($event,scope.row,scope.$index)"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="commucation"
          label="设备通信">
          <template slot-scope="scope">
            <div>
              <el-button type="text" @click="change1($event,scope.row,scope.$index)">点击与该设备进行通信</el-button>
              <el-dialog title="收货地址" :visible.sync="dialogVisible" >
                <el-form :model="form">
                  <el-form-item label="活动名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="活动区域" :label-width="formLabelWidth">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </div>
              </el-dialog>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <dialog></dialog>
    </div>
  </div>
</template>

<script>


export default {
  name: 'dialog',
  components: {},
  data() {
    return {
      name: 'helloworld',
      dialogVisible: false,
      c: 1,
      tableData: [{
        date: '未连接',
        name: '设备1',
        ip: '192.168.1.6',
        value: false,
      }, {
        date: '未连接',
        name: '设备2',
        ip: '192.168.1.2',
        value: true,
      }, {
        date: '已连接',
        name: '设备3',
        ip: '192.168.1.3',
        value: true,
      }, {
        date: '已连接',
        name: '设备4',
        ip: '192.168.1.4',
        value: true,
      }],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      formLabelWidth: '120px',
    }
  },
  methods: {
    getUserData() {
      fetchUserData().then(res => {
        this.userInfo = JSON.stringify(res, null, 4)
      })
    },
    handleCommand(command) {
      this.$message('click on item ' + command)
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    change(e, row, index) {
      console.log(index)
      console.log(row)
      if (row.status) {
        // eslint-disable-next-line no-unused-expressions
        this.$message({
          message: '设备已连接。',
          type: 'success',
          // eslint-disable-next-line no-sequences
        }),
          row.date = '已连接'
      } else {
        this.$message({
          message: '设备已中断。',
          type: 'error',
        })
        row.date = '未连接'
      }
    },
		change1(e,row,index){
			 this.dialogVisible=true
		},
    open() {
      this.dialogVisible = true
    },
    close() {
      this.dialogVisible = false
    },
  },
}
</script>

<style scoped>
.home-container {
  padding: 10px;
  padding-top: 5px;
}
.home-content {
  padding: 10px;
  border-radius: 5px;
  background: #fff;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
